<template>
	<view class="content1">
		<view class="recommendation-container">
			<!-- 左侧图片 -->
			<image class="recommend-image" src="@/static/video_preview/要饭.png" mode="aspectFill" />

			<!-- 中间内容 -->
			<view class="recommend-content">
				<text class="recommend-title">广告位招租</text>
				<text class="recommend-author">可怜可怜孩子吧 | 价格好商量</text>
			</view>
			<!-- 右侧省略号 -->
			<view class="recommend-more">
				<text>···</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 这里可以定义数据，例如推荐的标题、作者信息等，或通过props传入
			};
		}
	};
</script>

<style scoped>
	.content1 {
		padding: 0;
		border-bottom: 1px solid #999;
		/* 添加2px的底部边缘线，颜色为#888 */
	}

	/* 主容器 */
	.recommendation-container {
		display: flex;
		align-items: center;
		background-color: #f3f3f3;
		padding: 10px;
		border-radius: 10px;
		margin: 10px;
	}

	/* 左侧图片 */
	.recommend-image {
		width: 75px;
		height: 75px;
		border-radius: 8px;
		margin-right: 10px;
		object-fit: cover;
	}

	/* 中间内容 */
	.recommend-content {
		height: 75px;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* 标题在顶部，作者信息在底部 */
	}

	/* 标题样式 */
	.recommend-title {
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	/* 作者信息 */
	.recommend-author {
		font-size: 12px;
		color: #999;
	}

	/* 右侧省略号 */
	.recommend-more {
		font-size: 20px;
		color: #999;
	}
</style>